<template>
	<ly-frow-center class="header">
		
	<!-- header start -->
		<span class="marr title">考勤管理</span>
		<el-date-picker v-model="date" style="width: 130px;"
		 size="mini" placeholder="选择日期"> </el-date-picker>
		<el-select clearable size="mini" v-model="value" placeholder="请选择课程" class="select marl">
			<el-option size="mini" v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
		</el-select>
		<el-autocomplete clearable size="mini" suffix-icon="el-icon-search" style="position: relative;left:-10px;"
		 v-model="state" :fetch-suggestions="querySearch" placeholder="班级名称" :trigger-on-focus="false" 
		 @select="handleSelect" ></el-autocomplete>
	<!-- header end -->
	</ly-frow-center>
	<div class="main">
		<div style="margin-bottom: 20px;">今日课表</div>
		<div class="marl">
			<input type="checkbox"/> 全选 
			<el-button type="primary" style="width: 200px;" class="marl">考勤</el-button>
		</div>
		
	<!-- 考勤主体 start -->
		<ly-box class="mart" style="padding-bottom: 20px;">
			<ly-frow-center class="marrS martS marb">
				<input type="checkbox"/>
				<span class="bkgreen">班课</span>
				<span> <i class="el-icon-notebook-1"></i>啊啊啊啊</span>
				<span> <i class="el-icon-time"></i>09:30-10:00</span>
				<span> <i class="el-icon-s-custom"></i>???</span>
			</ly-frow-center>
			<ly-fbetween>
				<ly-frow-center class="marrS">
					<input type="checkbox"/>
					<span> span </span>
					<img src="../../assets/admin/logo.png" >
				</ly-frow-center>
				<ly-frow-center class="marrS">
					<ly-frow-center>
						<i class="el-icon-s-claim"></i>
						<span>旷课</span>
					</ly-frow-center>
					<ly-frow-center>
						<i class="el-icon-edit"></i>
						<span>签到</span>
					</ly-frow-center>
				</ly-frow-center>
			</ly-fbetween>
			<el-divider content-position="left">豁哗</el-divider>
			<ly-fbetween>
				<ly-frow-center class="marrS">
					<input type="checkbox"/>
					<span> span </span>
					<img src="../../assets/admin/logo.png" >
				</ly-frow-center>
				<ly-frow-center class="marrS">
					<ly-frow-center>
						<i class="el-icon-s-claim"></i>
						<span>旷课</span>
					</ly-frow-center>
					<ly-frow-center>
						<i class="el-icon-edit"></i>
						<span>签到</span>
					</ly-frow-center>
				</ly-frow-center>
			</ly-fbetween>
		</ly-box>
	<!-- 考勤主体 end -->
	</div>
</template>

<script>
	export default{
		data(){
			return {
				date: '',
			}
		}
	}
</script>

<style lang="less" scoped>
	.header{
		.title{background-color: white;width: 140px;height: 40px;line-height: 40px;text-align: center;}
		.select{position: relative;z-index: 1;}
	}
	.main{
		background-color: white;padding: 20px;height: 100%;
		.bkgreen{width: 50px;height: 30px;line-height: 30px;text-align: center;background-color: #c6eae0;color: green;}
		img{width: 30px;height: 30px;}
	}
</style>
